import React, { Component } from 'react';
import axios from "axios"
import "./App.css"
class App extends Component {
  // 1 constructor
  constructor(props){
    super(props);
    // 构造函数可以做
    /*
    1 初始化状态 
    */
   this.state = {
     msg:"牛" ,
     data:[],
   };
  //  2 创建ref
  this.ref = React.createRef();
  // 3修改事件的this指向
  this.handleClick = this.handleClick.bind(this);
  };
  // 2 static getDerivedStateFromProps 
  static getDerivedStateFromProps(props,state){
    return null;
  };
  handleClick(){
    console.log("执行 handleClick");
  };
  render() {
    //3render 返回一段jsx 不要在render函数中执行 this.setState
    return (
      <div>
         <div className="outerBox" id="outerBox">
          <div className="innerBo">
             
          </div>
        </div>
        <input type="text" ref={this.ref}/>
        {
          this.state.data.map(d=>{
            return <img src={d.image_src} alt="" key={d.goods_id}/>
          })
        }
       
      </div>
    );
  }
  // 组件已经挂载到DOM树上
  componentDidMount(){
    // 1请求数据
axios.get("https://www.linweiqin.cn/api/public/v1/home/swiperdata").then(res=>{
  console.log(res);
  this.setState({
    data:res.data.message, 
  })
})
    // 订阅
// todo redux subsribe 订阅数据
    // 3注册事件
document.getElementById("outerBox").addEventListener("scroll",function(e){
  console.log("盒子滚动啦",e);
})
  }
}

export default App;
